<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>云喇叭通知</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="通知类型" :required="true" prop="type">
                            <el-radio-group v-model="form.type">
                                <el-radio label="1" :disabled="type=='1' || type=='2'|| type=='3'">外卖类型</el-radio>
                                <el-radio label="2" :disabled="type=='1' || type=='2'|| type=='3'">店内类型</el-radio>
                                <el-radio label="3" :disabled="type=='1' || type=='2'|| type=='3'">当面付类型</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="新订单通知" :required="true" v-show="form.type=='1'">
                            <div class="flex">
                                <el-input v-model="newOrder" placeholder="如：您有新的订单，订单序号为orderNumber，请注意接单哦" type="textarea"
                                          :rows="4"></el-input>
                                <el-button type="text" @click="handleAudition(id,newOrder,form.type)" class="mar_l20">试听</el-button>
                            </div>
                            <div class="yb_margin lh16">变量信息：订单编号(orderNumber)、金额(money)、菜品(variety)</div>
                        </el-form-item>
                        <el-form-item label="预订单通知" :required="true" v-show="form.type=='1'">
                            <div class="flex">
                                <el-input v-model="advanceOrder" placeholder="如：您有新的预订单，订单序号为orderNumber，请注意接单哦" type="textarea"
                                          :rows="4"></el-input>
                                <el-button type="text" @click="handleAudition(id,advanceOrder,form.type)" class="mar_l20">试听</el-button>
                            </div>
                            <div class="yb_margin lh16">变量信息：订单编号(orderNumber)、金额(money)、菜品(variety)</div>
                        </el-form-item>
                        <el-form-item label="催单通知" :required="true" v-show="form.type=='1'">
                            <div class="flex">
                                <el-input v-model="reminder" placeholder="如：您有订单申请退单了，订单序号为orderNumber，请注意处理哦" type="textarea"
                                          :rows="4"></el-input>
                                <el-button type="text" @click="handleAudition(id,reminder,form.type)" class="mar_l20">试听</el-button>
                            </div>
                            <div class="yb_margin lh16">变量信息：订单编号(orderNumber)、金额(money)、菜品(variety)</div>
                        </el-form-item>
                        <el-form-item label="已取消/退单通知" :required="true" v-show="form.type=='1'">
                            <div class="flex">
                                <el-input v-model="chargeback" placeholder="如：您有订单取消了，订单序号为orderNumber，请注意处理哦" type="textarea"
                                          :rows="4"></el-input>
                                <el-button type="text" @click="handleAudition(id,chargeback,form.type)" class="mar_l20">试听</el-button>
                            </div>
                            <div class="yb_margin lh16">变量信息：订单编号(orderNumber)、金额(money)、菜品(variety)</div>
                        </el-form-item>
                        <el-form-item label="订单售后通知" :required="true" v-show="form.type=='1'">
                            <div class="flex">
                                <el-input v-model="afterSale" placeholder="如：您有订单申请售后了，订单序号为orderNumber，请注意处理哦" type="textarea"
                                          :rows="4"></el-input>
                                <el-button type="text" @click="handleAudition(id,afterSale,form.type)" class="mar_l20">试听</el-button>
                            </div>
                            <div class="yb_margin lh16">变量信息：订单编号(orderNumber)、金额(money)、菜品(variety)</div>
                        </el-form-item>
                      <el-form-item label="快餐下单通知" :required="true" v-show="form.type=='2'">
                        <div class="flex">
                          <el-input v-model="fastNewOrder" placeholder="如：您有新的订单，请注意接单哦" type="textarea"
                                    :rows="4"></el-input>
                          <el-button type="text" @click="handleAudition(id,fastNewOrder,form.type)" class="mar_l20">试听</el-button>
                        </div>
                      </el-form-item>
                      <el-form-item label="快餐取餐通知" :required="true" v-show="form.type=='2'">
                        <div class="flex">
                          <el-input v-model="fastPickOrder" placeholder="如：请takeNo到服务台取餐" type="textarea"
                                    :rows="4"></el-input>
                          <el-button type="text" @click="handleAudition(id,fastPickOrder,form.type)" class="mar_l20">试听</el-button>
                        </div>
                        <div class="yb_margin lh16">变量信息：桌台号(takeNo)</div>
                      </el-form-item>
                      <el-form-item label="堂食下单通知" :required="true" v-show="form.type=='2'">
                        <div class="flex">
                          <el-input v-model="inNewOrder" placeholder="如：table已成功下单" type="textarea"
                                    :rows="4"></el-input>
                          <el-button type="text" @click="handleAudition(id,inNewOrder,form.type)" class="mar_l20">试听</el-button>
                        </div>
                        <div class="yb_margin lh16">变量信息：桌台位置(table)</div>
                      </el-form-item>
                      <el-form-item label="堂食结账通知" :required="true" v-show="form.type=='2'">
                        <div class="flex">
                          <el-input v-model="inOutOrder" placeholder="如：table已成功结账，实付金额为300元" type="textarea"
                                    :rows="4"></el-input>
                          <el-button type="text" @click="handleAudition(id,inOutOrder,form.type)" class="mar_l20">试听</el-button>
                        </div>
                        <div class="yb_margin lh16">变量信息：桌台位置(table)、金额(money)</div>
                      </el-form-item>
                      <el-form-item label="收款通知" :required="true" v-show="form.type=='3'">
                        <div class="flex">
                          <el-input v-model="collection" placeholder="如：您已收款money元" type="textarea"
                                    :rows="4"></el-input>
                          <el-button type="text" @click="handleAudition(id,collection,form.type)" class="mar_l20">试听</el-button>
                        </div>
                        <div class="yb_margin lh16">变量信息：金额(money)</div>
                      </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import {voiceSave, getVoiceSave,audition} from "@/api/plug";

    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.type = this.$route.query.type
                this.edit()
            }
        },
        components: {},
        data() {
            return {
                form: {
                    type: '1',
                },
                id:'',
                type:'',
                newOrder: '',
                advanceOrder: '',
                reminder: '',
                chargeback: '',
                afterSale: '',
                fastNewOrder: '',
                fastPickOrder: '',
                inNewOrder: '',
                inOutOrder: '',
                collection: '',
            }
        },
        methods: {
            async edit() {
                const {data} = await getVoiceSave({id: this.id})
                this.form2 = this.form
                if(data.message){
                    this.newOrder = data.message[0].newOrder
                    this.advanceOrder = data.message[0].advanceOrder
                    this.reminder = data.message[0].reminder
                    this.chargeback = data.message[0].chargeback
                    this.afterSale = data.message[0].afterSale
                    this.fastNewOrder = data.message[0].fastNewOrder
                    this.fastPickOrder = data.message[0].fastPickOrder
                    this.inNewOrder = data.message[0].inNewOrder
                    this.inOutOrder = data.message[0].inOutOrder
                    this.collection = data.message[0].collection
                }
                this.form = Object.assign(this.form2, data);
            },
            async handleAudition(id,message,type){
                const {msg} = await audition({id,message,type});
                this.$baseMessage(msg, "success");
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        let message = [{
                            newOrder: '',
                            advanceOrder: '',
                            reminder: '',
                            chargeback: '',
                            afterSale: '',
                            fastNewOrder: '',
                            fastPickOrder: '',
                            inNewOrder: '',
                            inOutOrder: '',
                            collection: '',
                        }]
                        message[0].newOrder = this.newOrder
                        message[0].advanceOrder = this.advanceOrder
                        message[0].reminder = this.reminder
                        message[0].chargeback = this.chargeback
                        message[0].afterSale = this.afterSale
                        message[0].fastNewOrder = this.fastNewOrder
                        message[0].fastPickOrder = this.fastPickOrder
                        message[0].inNewOrder = this.inNewOrder
                        message[0].inOutOrder = this.inOutOrder
                        message[0].collection = this.collection
                        this.form.message = message
                        const {msg} = await voiceSave(this.form);
                        this.$baseMessage(msg, "success");
                        // this.$router.go(-1)
                        this.$router.push({path: '/msgnotlist'})
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
